<template>
	<view
		class="btn"
		:style="{
			backgroundColor: styles.colorBg,
			marginTop: styles.marginTop + 'px',
			marginBottom: styles.marginBottom + 'px',
			marginLeft: styles.marginLR + 'px',
			marginRight: styles.marginLR + 'px',
			borderRadius: styles.circle + 'px',
			
		}"
	>
		<swiper
			
			:style="{ borderRadius: styles.circle,height:styles.line == 1 ? '90px' : '180px' }"
			class="swiper"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
		>
			<swiper-item v-for="(v, i) in bthList" :key="i">
				<view style="display: flex;align-items: center;flex-wrap: wrap; padding: 10px 0 0;justify-content: flex-start;">
					<view class="bth-nav" :style="{ width: styles.num == 3 ? '33.33%' : styles.num == 4 ? '25%' : '20%' ,height:'100px'}"  v-for="(item,index) in v" :key="index">
						<view >
							<image style="width: 100upx;height: 100upx;overflow: hidden;" v-if="item.img == ''" :style="{ borderRadius: styles.circleBtn + 'upx'}" src="" mode="scaleToFill"></image>
							<image v-else style="width: 100upx;height: 100upx;overflow: hidden;" :style="{ borderRadius: styles.circleBtn + 'upx' }"  :src="item.img" mode="scaleToFill"></image>
						</view>

						<view :style="{ color: styles.colorWord }">{{ item.word }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
export default {
	name: 'btn',
	data() {
		return {
			indicatorDots: false,
			autoplay: false,
			interval: 2000,
			duration: 500,
			bthList:[]
		};
	},

	props: ['styles'],
	mounted() {
		this.groupBtn(this.styles.btnList, this.styles.line * this.styles.num)
		console.log(this.styles, 77);
	},
	computed:{
		
	},
	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		groupBtn(list, num) {
			let index = 0;
			let newArray = [];
			while (index < list.length) {
				newArray.push(list.slice(index, (index += num)));
			}
			this.bthList =  newArray;
		
		}
	}
};
</script>
<style lang="scss" scoped>
.btn {
    height:100%;
	// border: 1upx solid red;
	padding-top: 20upx;
	.swiper {
		width: 100%;
		
		line-height: 20px;
		.bth-nav{
			text-align: center;
		}
	}
}
</style>
